<template>
	<div class="center-match-bg">
		<div class="center-match-banner"></div>
		<div style="background-color: #fff">
			<ul class="link-tab">
				<li v-for="(link, index) in links" :key="index" :class="index == active ? 'active' : ''" @click="goLink(index)">{{ link.name }}</li>
			</ul>
		</div>
		<div>
			<div id="link1"></div>
			<div class="match-title"><img src="/static/images/match_introduce.png" /></div>
			<div class="match-card">{{ saishijianjie.content }}</div>
		</div>
		<div class="match-margin-bg"></div>
		<div id="link2"></div>
		<div class="match-title"><img src="/static/images/match_rule.png" /></div>
		<div class="match-card" style="background-image: none;">{{ saishiguize.content }}</div>
		<div class="match-title" id="link3"><img src="/static/images/commit.png" /></div>
		<div class="match-card" style="background-image: none;">
			<div class="home-team-person" v-for="(person, ii) in weiyuanhui" :key="ii">
				<img :src="person.headimage" />
				<div class="home-team-person-name">{{ person.name }}</div>
				<div>{{ person.jobtitle }}</div>
				<div>{{ person.intro }}</div>
			</div>			
		</div>
	</div>
</template>
<script>
import { Carousel, CarouselItem } from 'element-ui';
import { goAnchor } from '@/util';
import { saishizhongxin } from '../../api/cms.js';

export default {
	components: {
		Carousel,
		CarouselItem
	},
	data() {
		return {
			saishiguize: {},
			saishijianjie: {},
			weiyuanhui: {},

			active: 0,
			teams: [
				[
					{
						src: '/static/images/team.png',
						name: '雷军',
						company: '博世创投',
						meta: '投资合伙人、中国区风险投资负责人'
					},
					{
						src: '/static/images/team.png',
						name: '雷军',
						company: '博世创投',
						meta: '投资合伙人、中国区风险投资负责人'
					},
					{
						src: '/static/images/team.png',
						name: '雷军',
						company: '博世创投',
						meta: '投资合伙人、中国区风险投资负责人'
					},
					{
						src: '/static/images/team.png',
						name: '雷军',
						company: '博世创投',
						meta: '投资合伙人、中国区风险投资负责人'
					}
				]
			],
			links: [{ path: '/match_center', name: '赛事简介' }, { path: '/match_center', name: '赛事规则' }, { path: '/match_center', name: '委员会介绍' }],
			events: null
		};
	},
	created() {
		//请求信息
		saishizhongxin()
			.then(res => {
				this.saishiguize = res.data.data.saishiguize;
				this.saishijianjie = res.data.data.saishijianjie;
				this.weiyuanhui = res.data.data.weiyuanhui;

				console.log();
			})
			.catch(res => {
				console.log(res);
			});
	},
	mounted() {
		this.events = window.addEventListener('scroll', this.handle);
	},
	methods: {
		handle() {
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			var link1 = document.querySelector('#link1').offsetTop;
			var link2 = document.querySelector('#link2').offsetTop;
			var link3 = document.querySelector('#link3').offsetTop;
			var list = [
				{ index: 0, numer: Math.abs(scrollTop - link1 + 84) },
				{ index: 1, numer: Math.abs(scrollTop - link2 + 84) },
				{ index: 2, numer: Math.abs(scrollTop - link3 + 84) }
			];
			list.sort((a, b) => a.numer - b.numer);
			console.log(list);
			this.active = list[0].index;
		},
		goLink(index) {
			this.active = index;
			goAnchor(`#link${index + 1}`);
		}
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.handle);
		console.log(1111111111111111);
		this.events = null;
	}
};
</script>
<style scoped>
.center-match-banner {
	width: 100%;
	background-image: url(/static/images/center_banner.png);
	background-repeat: no-repeat;
	height: 472px;
	background-size: cover;
	min-width: 1440px;
}
.match-title {
	width: 1240px;
	margin: 84px auto 0;
	background: url(/static/images/match_line.png) no-repeat;
	background-position: right bottom;
	height: 124px;
}
.match-card {
	margin: 40px auto 0;
	border-radius: 25px;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
	width: 1240px;
	min-height: 406px;
	background-image: url(/static/images/match_card.png);
	background-size: 100% auto;
	background-position: right center;
	padding: 55px 50px;
	font-size: 16px;
	color: #000000;
	line-height: 30px;
}
.match-margin-bg {
	background-color: rgb(1, 67, 160);
	width: 100%;
	height: 304px;
	margin: 109px 0 74px;
}
.center-match-bg {
	background: url(/static/images/match_bg.png) no-repeat;
	background-position: center 12%;
	background-size: 100% auto;
}
</style>
